<<template>
	<view class="box">
		<view class="shoppingbox" v-show="shoppingCar" @tap="handleShoppingCar"></view>
		<view class="shopping">
			<view class="left">
				<view class="i1" @tap="handleShoppingCar">
					<van-icon name="shopping-cart-o" :info="shoppingCarNum" />
				</view>
				<view class="price" style="width: 50%;">
					<text>¥ {{priceSum}}</text>
				</view>
			</view>
			<view class="right" @tap="account">
				<text>结算</text>
			</view>
		</view>
		<view :class="shopping ? 'shoppingCar' : 'shoppingCar1'">
			<view class="shoppingCar_top">
				<view class="p1">
					<text>我的选择</text>
				</view>
				<view class="p2">
					<view class="clear">
						清除购物车
					</view>
					<view class="i1">
						<van-icon name="delete-o" />
					</view>
				</view>
			</view>
			<view class="shoppingCar_top1"></view>

			<view class="shopping_car">

				<view class="goodslist clear" v-for="(val,index) in shoppingCarData">
					<view class="goodslist_left">
						<image :src="val.images[1].url" mode=""></image>
					</view>
					<view class="goods_right">
						<view class="tip">
							<text class="goods_name">{{val.name}}</text>
							<text class="goods_price">¥{{val.price}}</text>
						</view>

						<view class="count">
							<view class="butbox">
								<view class="minus" @tap="handleCount(false,index)">
									<image src="../../../static/images/orderfoot/minus.png" mode=""></image>
								</view>
								<view class="num">
									<view>
										{{val.goodsNum}}
									</view>
								</view>
								<view class="add" @tap="handleCount(true,index)">
									<image src="../../../static/images/orderfoot/add.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>



	</template>

	<script>
		import {
			mapState,
			mapMutations
		} from "vuex"
		export default {
			data() {
				return {
					shopping: true, //购物车状态
					shoppingCar: false, //蒙版背景显示隐藏
					shoppingData: [], //对应商品数据
					goodsnum: 0, //已选商品数量
					num: 1,
					data1: []
				};
			},
			watch: {
				//监测购物车数据变化
				shoppingData() {
					this.goodsnum = this.shoppingCarData.length
				}
			},
			mounted() {
				this.$bus.$on('addgoods', (data) => {
					data.goodsNum = 1
					for (let i = 0; i < this.shoppingCarData.length; i++) {
						if (this.shoppingCarData[i].id == data.id) {
							this.isAdd(i)
							return
						}
					}
					//深拷贝,浅拷贝有问题,改不了值
					this.shoppingCarData.unshift(JSON.parse(JSON.stringify(data)))
					this.$store.state.shoppingSumPrice += data.price * 1
					this.$store.state.shoppingCarNum += 1
				})
			},
			methods: {
				...mapMutations(['initShopping', 'addShoping']),
				isAdd(e) {
					this.addShoping(e)
				},
				//弹出购物车
				handleShoppingCar() {
					//取反值
					this.shopping = !this.shopping
					this.shoppingCar = !this.shoppingCar
				},
				handleCount(status, id) {
					if (status) {
						this.shoppingCarData[id].goodsNum += 1
						this.$store.state.shoppingSumPrice += 10
					} else {
						if (this.shoppingCarData[id].goodsNum > 1) {
							this.shoppingCarData[id].goodsNum -= 1
						}

					}
					//this.sum
					console.log(status, id, this.shoppingData[id])
				},
				sum() {
					if (status) {
						this.shoppingData[id].goodsNum += 1
						//this.goodsSumPrice = this.price * this.num
						this.$store.state.shoppingSumPrice += 10
						if (this.shoppingData[id].goodsNum > 1)
							this.shoppingData[id].goodsNum -= 1
						if (this.shoppingData[id].goodsNum != 1) {
							this.$store.state.shoppingSumPrice -= 10
						}
					}
				},
				account() {
					if (this.$store.state.shoppingSumPrice == 0) {
						console.log("购物车没有商品")
						return
					}

					let login = uni.getStorageSync('userinfo')

					console.log(login)

					if (login == '' || login==undefined) {
						uni.showModal({
							title: '结算失败',
							content: '请点击确定授权登入',
							success: (res) => {
								if (res.confirm) {
									uni.getUserProfile({
										desc: '登录',
										success: (res) => {
											if (res.errMsg == 'getUserProfile:ok') {
												uni.showLoading({
													title: '加载中...',
													mask: true
												})
												setTimeout(() => {
													console.log(res)
													uni.setStorageSync('userinfo', JSON
														.stringify(res.userInfo))
													uni.hideLoading()
													uni.showToast({
														title: '登入成功!',
														duration: 2000 //持续时间为 2秒
													})
												}, 500)
											}
										},
										fail: () => {
											uni.showToast({
												title: '登入失败',
												icon: 'error',
												duration: 2000
											});
										}

									})
								}
							}
						})
					} else {
						uni.navigateTo({
							url: '../order/order'
						})
					}

				}
			},
			computed: {
				...mapState(['shoppingSumPrice', 'shoppingCarData', 'shoppingCarNum']),
				//总价计算
				priceSum() {
					let sum = 0
					for (var i = 0; i < this.shoppingCarData.length; i++) {
						sum += this.shoppingCarData[i].price * this.shoppingCarData[i].goodsNum
					}
					this.$store.state.shoppingSumPrice = sum
					return sum
				},
			}

		}
	</script>

	<!-- 购物车导航样式 -->
	<style scoped>
		.shoppingbox {
			width: 100%;
			height: 90%;
			background-color: rgb(0, 0, 0, 0.5);
			position: absolute;
			bottom: 0;
			z-index: 99;
		}

		.shopping {
			width: 100%;
			height: 105rpx;
			background-color: #f8f8f9;
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			overflow: hidden;
			z-index: 999;

		}

		.left {
			width: 75%;
			height: 100%;
			float: left;
		}

		.left>view {
			width: 20%;
			height: 100%;
			float: left;
			position: relative;
		}

		.left .i1 {
			line-height: 105rpx;
			text-align: center;
			font-size: 2rem;
			color: #ff7043;
		}

		.left .price {
			line-height: 105rpx;
			color: #DD524D;
			font-size: 1.1rem;
			font-weight: 700;
		}

		.right {
			width: 25%;
			height: 100%;
			float: left;
			background-color: #fbc02d;
			position: relative;
		}

		.right text {
			font-size: 1.1rem;
			font-weight: 700;
			color: #FFFFFF;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	</style>

	<!-- 购物车弹出部分样式 -->
	<style scoped>
		.shoppingCar {
			width: 100%;
			height: 10%;
			background-color: #eeeeef;
			position: fixed;
			bottom: -50%;
			transition: all 0.5s;
			z-index: 99;
			overflow: scroll;
		}

		.shoppingCar1 {
			width: 100%;
			height: auto;
			max-height: 40%;
			background-color: #eeeeef;
			position: fixed;
			bottom: 105rpx;
			transition: all 0.5s;
			z-index: 99;
			overflow: scroll;
		}

		.shopping_car {
			width: 100%;
			height: auto;
			background-color: #FFFFFF;

		}
	</style>

	<!-- 购物车弹出部分样式内部样式 -->
	<style scoped>
		.shoppingCar_top {
			width: 100%;
			height: 75rpx;
			position: fixed;
			background-color: #FFFFFF;
			z-index: 99;
		}

		.shoppingCar_top1 {
			width: 100%;
			height: 75rpx;
			margin-bottom: 0.5rpx;
		}

		.shoppingCar_top>view {
			width: 50%;
			line-height: 75rpx;
			float: left;

		}

		.shoppingCar_top .p1 text {
			font-size: 0.8rem;
			margin-left: 20rpx;
			font-weight: 700;
		}

		.shoppingCar_top .p2>view {
			float: right;
		}

		.shoppingCar_top .p2 .clear {
			margin: 0 10rpx;
			font-size: 0.8rem;
			color: #a9a9a9;
		}

		.goodslist {
			width: 100%;
			height: 150rpx;
			margin-bottom: 5rpx;
		}

		.goodslist .goodslist_left {
			width: 30%;
			height: 100%;
			float: left;
			position: relative;
		}

		.goodslist_left image {
			width: 90%;
			height: 90%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

		}

		.goodslist .goods_right {
			width: 70%;
			height: 100%;
			float: left;
			box-sizing: border-box;
			padding-left: 10rpx;
		}

		.goods_right .tip {
			width: 70%;
			height: 100%;
			float: left;
		}

		.goods_right .tip text {
			display: block;
		}

		.goods_right .tip .goods_name {
			height: 60%;
			font-size: 0.9rem;
			font-weight: 700;
			box-sizing: border-box;
			padding-top: 30rpx;
		}

		.goods_right .tip .goods_price {
			width: 30%;
			font-size: 0.8rem;
			font-weight: 700;
			color: #DD524D;
		}

		.goods_right .count {
			width: 30%;
			height: 100%;
			float: left;
		}

		.butbox {
			width: 90%;
			height: 100%;

		}

		.butbox>view {
			width: 33.3%;
			height: 100%;
			float: left;
			position: relative;
		}

		.butbox image,
		.butbox .num>view {
			width: 40rpx;
			height: 40rpx;
			text-align: center;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

		.li .price {
			width: 45%;
			background-color: #007AFF;
		}
	</style>
